<!-- <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title></title>
    <style media="screen">
      *{
        margin:0;
        padding:0;
      }
      html,body{
        width:100%;
        height:100%;
      }
      #loginBox{
        width:100%;
        height:100%;
        background:#efefef;
      }

      .loginTop{
        width:100%;
        height:1rem;
        line-height: 1rem;
        text-align: center;
        background-color: #f9fafd;

        font-size:0.3rem;
        font-weight: 600;

        display: flex;
        align-items: center;
      }
      .loginTopL{
        width: 0.6rem;
        height:0.6rem;
        background: url(./images/zz.png) no-repeat;
        background-size: 100% 100%
      }
      .loginTopT{
        width: 80%;
        text-align: center;
      }
      .loginmain{
        width:100%;
        font-size:0.23rem;
        line-height: 0.4rem;

      }
      .loginBanner{
        width: 100%;
        height:1.8rem;
        background: #ffd600;

        display: flex;
        align-items: flex-end;
        justify-content: space-around;
      }
      .loginimg{
        width:40%;
        height: 80%;
        background:url(./images/loginimg.png) no-repeat;
        background-size:100% 100%;
      }
      .loginP{
        width: 60%;
        height:1.8rem;
        z-index:1
      }
      .loginP>p{
        margin-top:0.5rem;
      }
      .loginID{
        width:100%;
        height:0.8rem;
        background:#fff;

        display:flex;
        margin:2px auto;

      }
      .loginmain input{
        height:0.8rem;
        outline:none;
        border:none;
        font-size: 0.3rem;
        padding-left: 0.3rem;
      }
      .yzm{
        width: 1.7rem;
        height: 70%;
        line-height: 0.6rem;
        margin-top: 0.1rem;

        font-size: 0.3rem;
        border-radius: 5px;
        background-color: #ffd600;
        text-align: center;

      }
      #duanxin{
        width:100%
      }
      #yuyin{
        width: 100%;
        height: 1rem;
        line-height: 1rem;
        text-align: center;

        font-size: 0.3rem;
      }
      #queding{
        width:94%;
        height:1rem;
        line-height:1rem;
        text-align: center;
        background:#ffd600;
        border:none;
        border-radius: 0.2rem;
        font-size:0.3rem;

        margin-left:0.2rem;
        outline:none;
      }
    </style>
  </head>
  <body> -->
    <div id="loginBox">
      <div class="loginTop">
        <div class="loginTopL">
        </div>
        <div class="loginTopT">
          验证手机
        </div>
      </div>

      <div class="loginmain">
        <div class="loginBanner">
          <div class="loginimg"></div>
          <div class="loginP">
            <p>为了方便您及时查询订单信息，鲜蜂侠需要验证您的手机号为查询帐号</p>
          </div>
        </div>


        <form class="loginForm" action="index.html" method="post">
          <div class="loginID">
              <input type="text" name="number" placeholder="手机号码" id="username">
              <div class="yzm">
                  获取验证码
              </div>
          </div>

          <input type="text" name="number" placeholder="短信验证" id="duanxin">

          <p id="yuyin">收不到短信？使用<a href="#">语音验证码</a></p>

          <a type="button" name="button" id="queding">确定</a>
        </form>
      </div>
    </div>
  <!-- </body>

  <script type="text/javascript">
            (function(doc, win) {
          var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function() {
              var clientWidth = docEl.clientWidth;
              if(!clientWidth) return;
              if(clientWidth == 640) {
                docEl.style.fontSize = '100px';
              } else {
                docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
              }
            };

          if(!doc.addEventListener) return;
          win.addEventListener(resizeEvt, recalc, false);
          doc.addEventListener('DOMContentLoaded', recalc, false);
        })(document, window);
  </script>
</html> -->
